<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue';

import { compusOptions, typeOptions, reserveStatusOptions } from './components/activityOptions'
import ItemCard, { CardPropsType } from './components/ItemCard.vue';

function back() {
	Taro.navigateBack()
}

const compusValue = ref(0)
const typeValue = ref(0)
const reserveStatusValue = ref(0)

const activityList = ref<CardPropsType[]>([{
	imgUrl: "x",
	title: "牛逼",
	address: "xxx",
	beginDate: new Date,
	endDate: new Date,
}])


Taro.request({
	url: 'http://localhost:3000/activity',
	header: {
		'content-type': 'application/json' // 默认值
	},
	success: function (res) {
		activityList.value = res.data.data.map(it => ({
			imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-ji.net%2FtujiJDAwMy50YW9iYW9jZG4uY29tL2Jhby91cGxvYWRlZC9pMy9UQjFIY1ZfRlYkNlgyWFYkNSQz.jpg&refer=http%3A%2F%2Fwww.t-ji.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666700890&t=07763c3ed57ee0e02acb28e33cb993d2",
			title: it.name,
			address: it.address,
			beginDate: it.startDate ?? new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * Math.floor((Math.random()*10000))).getTime(),
			endDate: it.endDate ?? new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * Math.floor((Math.random()*10000))).getTime(),
		}))
	}
})
</script>

<template>
	<view>
		<nut-navbar @on-click-back="back" title="活动预约" class="m-0"></nut-navbar>
		<view>
			<view>
				<nut-menu>
					<nut-menu-item v-model="compusValue" :options="compusOptions" />
					<nut-menu-item v-model="typeValue" :options="typeOptions" />
					<nut-menu-item v-model="reserveStatusValue" :options="reserveStatusOptions" />
				</nut-menu>
			</view>
			<view>
				<view class="p-2" v-for="(it, idx) in activityList" :key="idx">
					<nut-cell>
						<ItemCard :imgUrl="it.imgUrl" :title="it.title" address="图书馆六楼602" :beginDate="it.beginDate" :endDate="it.endDate" />
					</nut-cell>
				</view>
			</view>
		</view>
	</view>
</template>
